<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-language" content="zh-CN"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="applicable-device" content="pc">

    <title>车辆详情</title>
    <link href="/static/css/user/main.css" rel='stylesheet' type='text/css'/>
    <link href="/static/css/user/car/list.css" rel='stylesheet' type='text/css'/>
    <link href="/static/lib/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/user/common.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="/static/css/user/car/detail.css" type="text/css"/>
</head>
<body>
<header th:replace="user/common :: header"></header>
<!-- NAV头部搜索模块 -->
<div class="searchs">
    <div class="wrapper">
        <div class="fl" log-mod="search">
            <div class="search-txt">
                <form class="clear" id="searchForm" action="#" th:action="@{/user/car/list}" method="get">
                    <div class="search-tab"><i class="icon" data-bl="switch"></i>
                        <div data-bl="switch" class="check">关键词</div>

                        <div class="txt-search">
                            <input class="left txt" name="keyword" autocomplete="off"
                                   placeholder="如品牌、系列、车名等" id="keyword-box">
                        </div>
                    </div>
                    <button type="submit" class="act-search btn home-ico ico-search LOGCLICKEVTID">
                        搜索
                    </button>
                </form>
            </div>
        </div>
        <div class="fr last">
            <div class="ditu fr">
                <a th:href="@{/user/car/map(cityEnName=${city.enName})}" target="_blank">
                    <i></i>
                    地图找车
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 面包屑模块 -->
<div class="intro clear" mod-id="lj-common-bread">
    <div class="container">
        <div class="fl l-txt">
            <i class="icon"></i>&nbsp;
            <a href="/index">寻车</a>
            <span class="stp">&nbsp;&gt;&nbsp;</span>[<a href="/user/car/list" title="选择城市">
            <span th:text="${city.cnName}">城市</span></a>]找车
            <span class="stp">&nbsp;&gt;&nbsp;</span>当前车源
        </div>
        <div class="fr r-txt"></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="title-wrapper">
        <div class="content">
            <div class="title">
                <h1 class="main" th:text="${car.title}"></h1>
                <div class="sub" th:text="${car.description}">这个经纪人很懒，没写核心卖点</div>
            </div>
            <div class="btnContainer ">
                <button id="subscribe" th:switch="${car.subscribe.status}"
                        th:attr="data-bind=${car.subscribe.status}" th:style="${car.subscribe.status != null} ? 'background-color: #6a7b8c; color: black;'">
                    <span th:each="status : ${subscribeStatus}"
                          th:text="${status.name}"
                          th:case="${status.code}">
                    </span>
                    <span th:case="*">收藏</span>
                </button>
            </div>
        </div>
    </div>
    <div class="overview">
        <div class="img" id="topImg">
            <div class="imgContainer layui-carousel" id="overview-photos">
                <div carousel-item>
                    <div th:each="picture : ${car.pictures}">
                        <img th:src="${picture.cdnPrefix + picture.path}"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="content zf-content">
            <div class="price ">
                <span class="total" th:text="${car.price}">-</span>
                <span class="unit">
                    <span>元</span>
                </span>

                <span class="tips decoration">8成新</span>
                <div class="removeIcon"></div>
            </div>
            <div class="zf-room">
                <p class="lf"><i>座位数：</i><span th:text="${car.seats}"></span>座</p>
                <p class="lf"><i>排量：</i><span th:text="${car.displacement}"></span>L</p>
                <p class="lf"><i>里程：</i><span th:text="${car.mileage}"></span>km</p>
                <p class="lf"><i>车龄：</i><span th:text="${car.age}"></span>年</p>
                <p class="lf"><i>车型：</i><span th:text="${car.style}"></span></p>
                <p class="lf"><i>颜色：</i><span th:text="${car.color}"></span></p>
                <div class="clear"></div>
                <p><i>类型：</i>
                        <a th:href="@{/user/car/list(brandCode=${car.brandCode})}" th:text="${car.brand}">品牌</a>
                    - <a th:href="@{/user/car/list(brandCode=${car.brandCode}, seriesCode=${car.seriesCode})}"><span th:text="${car.series}"></span>系列</a>
                </p>
                <p><i>位置：</i>
                    <a th:href="@{/user/car/list(cityEnName=${city.enName}, regionEnName=${region.enName})}" th:text="${region.cnName}">地区</a>
                </p>
                <p class="lf"><i>发布时间：</i>
                    <span th:text="${#dates.format(car.lastUpdateTime, 'yyyy-MM-dd')}">时间</span>
                </p>
                <div class="clear"></div>
            </div>
            <div class="brokerInfo" log-mod="zufang_detail_diamond-first">
                <a href="#">
                    <img class="LOGCLICK" data-log_id="20001" data-bl="agent" data-el="1000000020276906"
                         th:src="${agent.avatar}" alt="经纪人">
                </a>
                <div class="brokerInfoText">
                    <div class="brokerName">
                        <a href="#" class="name LOGCLICK" data-log_id="20001"
                           data-bl="agent" data-el="1000000020276906" th:text="${agent.name}">经纪人</a>
                        <span class="tag ">高级经纪人</span>
                        <a class="LOGCLICK" data-log_id="20001" data-bl="agentim"
                           data-el="1000000020276906" style="display: none;" title="在线咨询"
                           data-ucid="1000000020276906">
                        </a>
                    </div>
                    <div class="evaluate">
                        <span class="time">本车带看：<span th:text="${car.watchTimes}">0</span>次</span>
                    </div>
                    <div class="phone" th:text="${agent.phoneNumber}">
                    </div>
                </div>
            </div>
            <div class="houseRecord">
                <span class="houseNum">寻车编号：<span th:text="${car.id}"></span></span>
                <div class="right">
                    <span class="detail">真实车源，假一赔亿！</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="detailPageTab">
    <ul style="position: relative; top: 0px; z-index: 1000; width: 1000px;">
        <li>
            <a class="force" href="#introduction">车源介绍</a>
        </li>
        <li>
            <a href="#around" class="">周边配套</a>
        </li>
    </ul>
</div>

<div class="content-wrapper introduction-wrapper" id="introduction">
    <div class="introduction">
        <div class="title">车源介绍</div>
        <div class="introContent">
            <div class="base">
                <div class="name">基本属性</div>
                <div class="content">
                    <ul>
                        <li>
                            <span class="label">品牌：</span>
                            <a th:href="@{/user/car/list(brandCode=${car.brandCode})}" th:text="${car.brand}">品牌</a>
                        </li>
                        <li>
                            <span class="label">系列：</span>
                            <a th:href="@{/user/car/list(brandCode=${car.brandCode}, seriesCode=${car.seriesCode})}" th:text="${car.series}">系列</a>
                        </li><li></li><li></li>
                        <li>
                            <span class="label">位置：</span>
                            <a th:href="@{/user/car/list(cityEnName=${city.enName}, regionEnName=${region.enName})}" th:text="${region.cnName}">地区</a>
                        </li><li></li><li></li><li></li>
                        <li>
                            <span class="label">价格：</span>
                            <span th:text="${car.price} + '元'"></span>
                        </li>
                        <li>
                            <span class="label">座位数：</span>
                            <span th:text="${car.seats} + '座'"></span>
                        </li>
                        <li>
                            <span class="label">排量：</span>
                            <span th:text="${car.displacement} + 'L'"></span>
                        </li>
                        <li>
                            <span class="label">里程：</span>
                            <span th:text="${car.mileage} + 'km'"></span>
                        </li>
                        <li>
                            <span class="label">车龄：</span>
                            <span th:text="${car.age} + '年'"></span>
                        </li>
                        <li>
                            <span class="label">变速箱：</span>
                            <span th:text="${car.gearBoxMeaning}"></span>
                        </li>
                        <li>
                            <span class="label">颜色：</span>
                            <span th:text="${car.colorMeaning}"></span>
                        </li>
                        <li>
                            <span class="label">驱动类型：</span>
                            <span th:text="${car.driveTypeMeaning}"></span>
                        </li>
                        <li>
                            <span class="label">排放标准：</span>
                            <span th:text="${car.emissionStandardMeaning}"></span>
                        </li>
                        <li>
                            <span class="label">车型：</span>
                            <span th:text="${car.styleMeaning}"></span>
                        </li>
                        <li>
                            <span class="label">燃油类型：</span>
                            <span th:text="${car.fuelTypeMeaning}"></span>
                        </li>

                    </ul>
                </div>
            </div>
            <!--<div class="feature">-->
                <!--<div class="name">车源特色</div>-->
                <!--<div class="zf-tag">-->
                    <!--<ul class="se">-->
                        <!--<li class="tag1 tags">-->
                            <!--<span></span>-->
                            <!--床-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag11 tags">-->
                            <!--<span></span>-->
                            <!--衣柜-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag12 tags">-->
                            <!--<span></span>-->
                            <!--桌椅-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag2 tags">-->
                            <!--<span></span>-->
                            <!--电视-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag3 tags">-->
                            <!--<span></span>-->
                            <!--冰箱-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag4 tags">-->
                            <!--<span></span>-->
                            <!--洗衣机-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag5 tags">-->
                            <!--<span></span>-->
                            <!--空调-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag10 tags">-->
                            <!--<span></span>-->
                            <!--热水器-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag13 tags">-->
                            <!--<span></span>-->
                            <!--微波炉-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag6 tags">-->
                            <!--<span></span>-->
                            <!--暖气-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag7 tags">-->
                            <!--<span></span>-->
                            <!--宽带-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                        <!--<li class="tag9 tags">-->
                            <!--<span></span>-->
                            <!--天然气-->
                            <!--<p>-->
                            <!--</p>-->
                        <!--</li>-->
                    <!--</ul>-->
                    <!--<div class="clear"></div>-->
                <!--</div>-->
                <!--<div class="featureContent">-->
                    <!--<ul>-->
                        <!--<li>-->
                            <!--<span class="label">户型介绍：</span>-->
                            <!--<span class="text" th:text="${car.description}">暂无描述</span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<span class="label">详细地址：</span>-->
                            <!--<span class="text" th:text="${car.address}">暂无描述</span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<span class="label">描述：</span>-->
                            <!--<span class="text" th:text="${car.description}">暂无描述</span>-->
                        <!--</li>-->

                    <!--</ul>-->
                <!--</div>-->
            <!--</div>-->
        </div>
        <div class="more">展开更多信息</div>
    </div>
</div>

<div id="only" data-city="bj" data-page="zufang_view"></div>

<script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/static/lib/layui/layui.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/lib/layer/2.4/layer.js"></script>


<script th:inline="javascript" type="text/javascript">
    <!-- layui的图片轮播 -->
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#overview-photos',
            width: '100%', //设置容器宽度
            arrow: 'always', //始终显示箭头
            //,anim: 'updown' //切换动画方式
            height: '400px',
            autoplay: false // 关闭自动切换
        });
    });

    $(function () {
        var carId = [[${car.id}]],
            subscribeBtn = $('#subscribe');
        subscribeBtn.on('click', function () {
            var subscribeStatus = subscribeBtn.attr('data-bind');
            switch (subscribeStatus) {
                case "ADDED":
                    cancelSubscribe();
                    break;
                case "SUBSCRIBED":
                    layer.msg('已预约此车!', {icon: 5, time: 2000});
                    break;
                case "SAW":
                    layer.msg('您已看过此车!', {icon: 5, time: 2000});
                    break;
                default:
                    subscribe();
                    break;
            }

            function subscribe() {
                $.ajax({
                    url: '/car/subscribe',
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({
                        'carId': carId
                    }),
                    dataType: "json",
                    success: function (data) {
                        if (data.code === 200) {
                            subscribeBtn.attr('data-bind', "SUBSCRIBED");
                            subscribeBtn.css('background-color', '#6a7b8c');
                            subscribeBtn.css('color', 'black');
                            subscribeBtn.find('span').text('已收藏');
                        } else if (data.code === 403) {
                            layer.msg('请先登录,再执行收藏操作', {icon: 5, time: 2000});
                        } else {
                            layer.msg(data.message, {icon: 5, time: 2000});
                        }
                    },
                    error: function (xhr, response, error) {
                        if (xhr.status === 403) {
                            layer.msg('请先登录,再执行收藏操作', {icon: 5, time: 2000});
                        } else {
                            layer.msg('Server Error: ' + response, {icon: 5, time: 3000});
                        }
                    }
                });
            }

            function cancelSubscribe() {
                layer.confirm('确认要取消收藏吗', {
                    btn: ['确认', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: '/car/subscribe/' + [[${car.subscribe.id}]],
                        type: 'DELETE',
                        success: function (data) {
                            if (data.code === 200) {
                                subscribeBtn.attr('data-bind', "ADD")
                                    .css('background-color', '#0054a5')
                                    .css('color', '#fff');
                                subscribeBtn.find('span').text('收藏').css('color');
                                layer.msg('已取消收藏!', {icon: 6, time: 2000});
                            } else if (data.code === 403) {
                                layer.msg('请先登录,再执行操作', {icon: 5, time: 2000});
                            } else {
                                layer.msg(data.message, {icon: 5, time: 2000});
                            }
                        },
                        error: function (xhr, response, error) {
                            if (xhr.status === 403) {
                                layer.msg('请先登录,再执行收藏操作', {icon: 5, time: 2000});
                            } else {
                                layer.msg('Server Error: ' + response, {icon: 5, time: 3000});
                            }
                        }
                    });
                });

            }
        });
    });
</script>
</body>
</html>
